<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="user-scalable=no">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />
    <script src="js/index.js"></script>
</head>

<body>
    <section id="box">
        <div class="box_bj">
            <header class="nav">
                <div class="container clearfix">
                    <a href="javascript:;" class="back">箭头</a>
                    <h1>王超<span>web前端工程师</span></h1>
                    <div class="contact clearfix sm_hide">
                        <a href="javascript:;">630305549</a>
                        <a href="mailto:lanpang1996@163.com">lanpang1996@163.com</a>
                    </div>
                </div>
            </header>
            <section class="self_bj">
                <div class="container clearfix">
                    <!-- 头像 -->
                    <figure class="self_pic clearfix col-md-8 col-md-push-12 col-lg-13 col-lg-push-20">

                        <div class="col-xs-5 pic_box col-md-32 col-lg-59">
                            <img src="images/self_pic.jpg" alt="">
                        </div>

                        <div class="col-xs-8">
                            <figcaption class="md_hide">
                                <h1>
                                    王超
                                    <span class="col-xs-13">
                                      web前端工程师
                                    </span>
                                </h1>
                            </figcaption>
                        </div>

                    </figure>
                    <!-- 个签 -->

                    <div class="self_sign col-md-12 col-md-pull-8 col-lg-20 col-lg-pull-13">
                        失败的定义是什么都要做，什么都在做，却从未做完，也从未做好
                    </div>

                    <!-- 个人信息 -->

                    <div class="self_mes col-md-12 col-lg-26">
                        <ul>
                            <li>
                                <span>手机</span>
                                <p>15642519601</p>
                            </li>
                            <li>
                                <span>籍贯</span>
                                <p>江西省</p>
                            </li>
                            <li>
                                <span>现居</span>
                                <p>大连市西岗区</p>
                            </li>
                            <li>
                                <span>爱好</span>
                                <p>音乐、电影、游戏、读书</p>
                            </li>
                            <li>
                                <span>个人奖项</span>
                                <p>校二等奖学金</p>
                            </li>
                            <li>
                                <span>自我评价</span>
                                <p>勤奋进取，对喜欢的事物有源源不断的动力。乐观开朗，能很快的融入新的团队中</p>
                            </li>

                        </ul>
                    </div>
                </div>
            </section>

            <div class="contact md_hide">
                <div class="container clearfix">
                    <a href="javascript:;">630305549</a>
                    <a href="javascript:;">lanpang1996@163.com</a>
                </div>
            </div>
        </div>

        <div class="skill_bj">
            <div class="container">
                <div class="title">
                    <h2>技能展示</h2>
                    <h4>自学前端一年，所有的坚持都来源于热爱</h4>
                </div>

                <ul class="skill_list">
                    <li>
                        <span class="percent">80%</span>
                        <span>HTML5</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">75%</span>
                        <span>CSS3</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">75%</span>
                        <span>Javascript</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">70%</span>
                        <span>Jquery</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">80%</span>
                        <span>Vue</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">60%</span>
                        <span>Bootstrap</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">60%</span>
                        <span>ES6</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">60%</span>
                        <span>LESS</span>
                        <em></em>
                    </li>
                    <li>
                        <span class="percent">30%</span>
                        <span>WXML WXSS WXS</span>
                        <em></em>
                    </li>
                </ul>
            </div>
        </div>

        <div class="work">
            <div class="container">
                <div class="title">
                    <h2>工作时光轴</h2>
                    <h4>恪尽职守、精益求精</h4>
                </div>
                <ul class="work_list clearfix">
                    <li>
                        <header class="clearfix">
                            <span>2017-09-01 ~ 至今</span>
                            <span>机械设计工程师</span>
                            <em></em>
                        </header>
                        <article class="content">
                            <h4>大连市第谊技研科技有限公司</h4>
                            <p>
                                负责城市立体车库的钢结构设计,保证钢材选型、结构、受力、焊接方式合理。<br> 给排水系统机械部分设计。包括：水门门体、水密、金具等。 <br> 给排水管道系统的设计。确保管道路径合理，没有干涉。 <br> 根据图纸要求绘制各类2D、3D零件图以及装配图。 <br> 熟练掌握CAD、SolidWorks等专业绘图软件。
                                <br>
                            </p>
                        </article>
                    </li>
                    <li>
                        <header class="clearfix">
                            <span>2017-09-01 ~ 至今</span>
                            <span>机械设计工程师</span>
                            <em></em>
                        </header>
                        <article class="content">
                            <h4>大连市第谊技研科技有限公司</h4>
                            <p>
                                负责城市立体车库的钢结构设计,保证钢材选型、结构、受力、焊接方式合理。<br> 给排水系统机械部分设计。包括：水门门体、水密、金具等。 <br> 给排水管道系统的设计。确保管道路径合理，没有干涉。 <br> 根据图纸要求绘制各类2D、3D零件图以及装配图。 <br> 熟练掌握CAD、SolidWorks等专业绘图软件。
                                <br>
                            </p>
                        </article>
                    </li>
                    <li>
                        <header class="clearfix">
                            <span>2017-09-01 ~ 至今</span>
                            <span>机械设计工程师</span>
                            <em></em>
                        </header>
                        <article class="content">
                            <h4>大连市第谊技研科技有限公司</h4>
                            <p>
                                负责城市立体车库的钢结构设计,保证钢材选型、结构、受力、焊接方式合理。<br> 给排水系统机械部分设计。包括：水门门体、水密、金具等。 <br> 给排水管道系统的设计。确保管道路径合理，没有干涉。 <br> 根据图纸要求绘制各类2D、3D零件图以及装配图。 <br> 熟练掌握CAD、SolidWorks等专业绘图软件。
                                <br>
                            </p>
                        </article>
                    </li>
                    <li>
                        <header class="clearfix">
                            <span>2017-09-01 ~ 至今</span>
                            <span>机械设计工程师</span>
                            <em></em>
                        </header>
                        <article class="content">
                            <h4>大连市第谊技研科技有限公司</h4>
                            <p>
                                负责城市立体车库的钢结构设计,保证钢材选型、结构、受力、焊接方式合理。<br> 给排水系统机械部分设计。包括：水门门体、水密、金具等。 <br> 给排水管道系统的设计。确保管道路径合理，没有干涉。 <br> 根据图纸要求绘制各类2D、3D零件图以及装配图。 <br> 熟练掌握CAD、SolidWorks等专业绘图软件。
                                <br>
                            </p>
                        </article>
                    </li>

                </ul>
            </div>
        </div>

        <div class="demos">
            <div class="container">
                <div class="title">
                    <h2>前端知识汇总&案例展示</h2>
                </div>

                <ul class="demos_list">
                    <li>
                        <h2><span class="li_active"></span>案例1</h2>
                        <ul class="item_list list_active">
                            <li class="item_active items">
                                <div class="item_name">下拉菜单</div>
                                <div class="item_content">
                                    <div class="head md_hide">
                                        <a href="javascript:;" class="back">箭头</a>
                                    </div>
                                    <div class="main_box">
                                        <header>
                                            <h2>下拉菜单</h2>
                                            <h4>发布时间：2017-04</h4>
                                        </header>
                                        <article>

                                            这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成
                                        </article>
                                        <img src="./images/my_pro.jpg" alt="">
                                        <button>点击预览</button>
                                        <div class="share clearfix">
                                            <span>分享至：</span>
                                            <span class="clearfix">
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="items">
                                <div class="item_name">图片轮播</div>
                                <div class="item_content">
                                    <div class="head md_hide">
                                        <a href="javascript:;" class="back">箭头</a>
                                    </div>
                                    <header>
                                        <h2>图片轮播</h2>
                                        <h4>发布时间：2017-04</h4>
                                    </header>
                                    <article>
                                        这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成
                                    </article>
                                    <img src="./images/my_pro.jpg" alt="">
                                    <button>点击预览</button>
                                    <div class="share clearfix">
                                        <span>分享至：</span>
                                        <span class="clearfix">
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li class="items">
                                <div class="item_name">递归树形菜单</div>
                                <div class="item_content">
                                    <div class="head md_hide">
                                        <a href="javascript:;" class="back">箭头</a>
                                    </div>
                                    <header>
                                        <h2>递归树形菜单</h2>
                                        <h4>发布时间：2017-04</h4>
                                    </header>
                                    <article>
                                        这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成
                                    </article>
                                    <img src="./images/my_pro.jpg" alt="">
                                    <button>点击预览</button>
                                    <div class="share clearfix">
                                        <span>分享至：</span>
                                        <span class="clearfix">
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h2><span></span>案例2</h2>
                        <ul class="item_list">
                            <li class="items">
                                <div class="item_name">下拉菜单</div>
                                <div class="item_content">
                                    <div class="head md_hide">
                                        <a href="javascript:;" class="back">箭头</a>
                                    </div>
                                    <div class="main_box">
                                        <header>
                                            <h2>下拉菜单</h2>
                                            <h4>发布时间：2017-04</h4>
                                        </header>
                                        <article>

                                            这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成 这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成
                                        </article>
                                        <img src="./images/my_pro.jpg" alt="">
                                        <button>点击预览</button>
                                        <div class="share clearfix">
                                            <span>分享至：</span>
                                            <span class="clearfix">
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                                <a href="javascript:;"></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="items">
                                <div class="item_name">图片轮播</div>
                                <div class="item_content">
                                    <div class="head md_hide">
                                        <a href="javascript:;" class="back">箭头</a>
                                    </div>
                                    <header>
                                        <h2>图片轮播</h2>
                                        <h4>发布时间：2017-04</h4>
                                    </header>
                                    <article>
                                        这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成
                                    </article>
                                    <img src="./images/my_pro.jpg" alt="">
                                    <button>点击预览</button>
                                    <div class="share clearfix">
                                        <span>分享至：</span>
                                        <span class="clearfix">
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li class="items">
                                <div class="item_name">递归树形菜单</div>
                                <div class="item_content">
                                    <div class="head md_hide">
                                        <a href="javascript:;" class="back">箭头</a>
                                    </div>
                                    <header>
                                        <h2>递归树形菜单</h2>
                                        <h4>发布时间：2017-04</h4>
                                    </header>
                                    <article>
                                        这是我在学习JS的时候一个小练习，综合运 用了JS的元素获取、运动框架等方式完成
                                    </article>
                                    <img src="./images/my_pro.jpg" alt="">
                                    <button>点击预览</button>
                                    <div class="share clearfix">
                                        <span>分享至：</span>
                                        <span class="clearfix">
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                            <a href="javascript:;"></a>
                                        </span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <h2><span></span>案例3</h2>
                        <ul></ul>
                    </li>
                </ul>


            </div>
        </div>

        <div class="products">
            <div class="container">
                <div class="title">
                    <h2>项目池</h2>
                    <h4>独立完成，在实战中发现更好的自己</h4>
                </div>
                <ul class="project_list">
                    <li class="clearfix">
                        <header class="clearfix">
                            <div class="headImg">
                                <img src="./images/project_img1.png" alt="">
                            </div>
                            <div class="headTitle">
                                <p>响应式简历项目</p>
                                <p>2017.12.12~2017.12.23</p>
                            </div>
                        </header>
                        <article>
                            个人简历，主要用到H5 C3 JS Less以及响应式相关知识。由于原生bootstrap的局限性只能设置12个栅格。所以在实际 应用中并不是非常实用。这个项目实用less封装了自定义的栅格系统。包括列排序，列偏移等bootstrap核心功能。
                        </article>
                        <footer>
                            <ul class="use_skills clearfix">
                                <li>Javascript</li>
                                <li>Less</li>
                                <li>Bootstrap</li>
                            </ul>
                        </footer>
                    </li>
                    <li class="clearfix">

                        <header class="clearfix">
                            <div class="headImg">
                                <img src="./images/project_img.png" alt="">
                            </div>
                            <div class="headTitle">
                                <p>去哪儿APP</p>
                                <p>2017.11.11~2017.12.05</p>
                            </div>
                        </header>
                        <article>
                            使用vue及其vue-router、vuex以及axios等核心功能仿写去哪儿网APP的主页、城市列表页以及景点详情页面。 并且实现了各城市、各景点的数据请求。较为完整的还原了线上大型项目的前端部分。
                        </article>
                        <footer>
                            <ul class="use_skills clearfix">
                                <li>Javascript</li>
                                <li>Vue</li>
                                <li>Stylus</li>
                            </ul>
                        </footer>
                    </li>
                </ul>
            </div>
        </div>

        <footer class="footer">

        </footer>

        <div class="backtop"></div>
    </section>
    <script src="./js/share.js"></script>
</body>

</html>